<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://oss.petslib.cn/prod/static/cdns/jszip/3.7.1/jszip.min.js"></script> -->
    <!-- <script src="https://oss.petslib.cn/prod/static/cdns/fileSaver/fileSaver.js"></script> -->

</head>

<body>
    <script>
        const SRC = {
            'jszip': 'https://oss.petslib.cn/prod/static/cdns/jszip/3.7.1/jszip.min.js',
            'fileSaver': 'https://oss.petslib.cn/prod/static/cdns/fileSaver/fileSaver.js',
        }
        const insertScript = (url, callback) => {
            let el = document.createElement('script')
            el.src = url
            el.onload = callback
            let s = document.getElementsByTagName('script')[0]
            s.parentNode.insertBefore(el, s)
        }
        let scriptPromise = null
        function loadScript() {
            if (scriptPromise) {
                return scriptPromise
            }
            const js1 = new Promise((resolve) => insertScript(SRC.jszip, resolve))
            const js2 = new Promise((resolve) => insertScript(SRC.fileSaver, resolve))
            scriptPromise = Promise.all([js1, js2])
            return scriptPromise
        }

        /**
         * 获取图片的 base64 编码
         * @param image 图像对象
         * @return {string} 返回base64编码
         */
        const getImageBase64 = image => {
            const canvas = document.createElement('canvas')
            canvas.width = image.width
            canvas.height = image.height
            const ctx = canvas.getContext('2d')
            ctx.drawImage(image, 0, 0, image.width, image.height)
            // 获取图片后缀名
            const extension = image.src
                .substring(image.src.lastIndexOf('.') + 1)
                .toLowerCase() || 'png'
            // 某些图片 url 可能没有后缀名，默认是 png
            return canvas.toDataURL('image/' + extension, 1)
        }

        /**
         * 批量下载图片
         * @param sourceList图像数据
         * @param zipName // 下载时的文件夹名称
         * @param sourceList[i].picName // 每张图片的名称--注意: 需要对数据属性进行转换
         */
        const downloadImgsZip = async (sourceList, zipName = '文件夹名称') => {
            // debugger
            const zip = new JSZip()
            const fileFolder = zip.folder(zipName) // 创建 zipName 文件夹
            const fileList = []
            for (let i = 0; i < sourceList.length; i++) {
                const name = sourceList[i].picName // 注意: 每张图片的名称--需要对数据属性进行转换
                const image = new Image()
                image.setAttribute('crossOrigin', 'Anonymous') // 设置 crossOrigin 属性，解决图片跨域报错
                image.src = sourceList[i].imgUrl
                image.onload = async () => {
                    const url = await getImageBase64(image)
                    fileList.push({ name: name, img: url.substring(22) }) // 截取 data:image/png;base64, 后的数据
                    if (fileList.length === sourceList.length) {
                        if (fileList.length) {
                            for (let k = 0; k < fileList.length; k++) {
                                // 往文件夹中，添加每张图片数据
                                fileFolder.file(fileList[k].name + '.png', fileList[k].img, {
                                    base64: true
                                })
                            }
                            zip.generateAsync({ type: 'blob' }).then(content => {
                                saveAs(content, zipName + '.zip')
                            })
                        }
                    }
                }
            }
        }

        const aa = sourceList = [
            {
                id: 1,
                imgUrl: 'https://oss.petslib.cn/test/research/report-page-images/20240221/3b77bea7cd3afaa2cb72394fbe926c9d.png',
                picName: '图片1'
            },
            {
                id: 2,
                imgUrl: 'https://oss.petslib.cn/test/preview-image/20240222/1708574619616_QQ%E6%88%AA%E5%9B%BE20211227141248.png',
                picName: '图片2'
            }
        ]

        loadScript().then(() => {
            console.log('JSZip', JSZip)
            console.log('saveAs', saveAs)
            // downloadImgsZip(aa)
        })
    </script>
</body>

</html>